<template>
    <a-card style="width: 100%;margin-left: 5px;display: flex;flex-direction: column;">
        <div style="display: flex;flex-direction: row;">
            <div class="Product_Image">
            <img :src="Product.coverimageUrl" style="width: 100%;height: 100%; background: no-repeat 50%" />
        </div>
        <div class="Product_Content">
            <div class="Title">{{Product.title}}
            </div>
            <div class="Detail">
                {{ Product.detail }}
            </div>
        </div>
        </div>
        
        <div :href="Product.Url" style="left: 90%;margin-left: 80%;" @click="showdetail">>查看详情</div>
    </a-card>
   
</template>

<script>


export default{
    name: "ProductListCard",
    props: {
        Product: Object
    },
    data() {
        return {
        // Title:'',
        // Detail:'',
        // Url:''
        };
    },
    created() {
        ;
    },
    methods:{
        showdetail(){
            
            this.$emit('showdetail',this.Product)
            // this.$refs.publistContent.visible=true
        }
    }
}
</script>

<style lang="less" scoped>
   
        // height: 300px;
        .Product_Image{
        margin-top: 10px;
        width: 50%;
        height: 200px;
        min-height: 100%;
        
        // background: #f0f2f5 url(~@/assets/company.jpg) no-repeat 50%;
        background-size: 100%;
        }
        .Product_Content{
            margin-left: 10px;
            margin-top: 10px;
            width: 50%;
            height: 200px;
            .Title{
                font-size: large;
                margin-bottom: 10px;
            }
            
        }
    
</style>